<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">{{pageTitle}}</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"
        routerLinkActive="active">
        <a class="nav-link"
          routerLink='/welcome'>Home</a>
      </li>
      <li class="nav-item"
        routerLinkActive="active">
        <a class="nav-link"
          routerLink='/products'>Product List</a>
      </li>
    </ul>
    <ul class="navbar-nav navbar-right">
      <li class="nav-item"
        *ngIf="isLoggedIn">
        <a class="nav-link"
          routerLink='/login'>Welcome {{ userName }}</a>
      </li>
      <li class="nav-item"
        *ngIf="!isLoggedIn">
        <a class="nav-link"
          routerLink='/login'>Log In</a>
      </li>
      <li class="nav-item"
        *ngIf="isLoggedIn">
        <a class="nav-link"
          (click)="logOut()"
          style="cursor: pointer">Log Out</a>
      </li>
    </ul>
  </div>
</nav>
